<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        formItemWidth="120px"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
        :isScalingBtn="false"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showPagination
        isCustomSort
        showActionCol
        :showSelectCol="true"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :actionRender="actionRender"
        :actionColWidth="160"
        :selection-change="selectionChange"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
        @customSortChange="handleSortTable"
      >
        <div slot="content_context">
          <el-button
            v-if="showBtn('新增')"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button
          >
          <el-button
            v-if="showBtn('编辑')"
            :disabled="!tableInfo.selection.length"
            type="primary"
            size="mini"
            icon="el-icon-edit-outline"
            @click="batchEdit"
          >批量编辑</el-button
          >
          <el-button
            v-if="showBtn('导出')"
            type="primary"
            size="mini"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="exportCategory"
          >导出关联品类</el-button
          >
        </div>
      </BasicTable>
    </el-card>
    <LinkCategory :visible.sync="categoryDialogVisible" :materialId="materialId" :materialName="materialName" @getTableData="getTableData" />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import LinkCategory from './components/LinkCategory'
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { setAuthBtnId, createExcelByExport } from '@/utils/bizUtils';
import { queryMaterialListService, exportMaterialLinkCategoryService } from '@/api/finance/rawMaterialManage/rawMaterial';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
    LinkCategory
  },
  data () {
    return {
      materialName: '',
      materialId: null,
      categoryDialogVisible: false,
      formItemList: FORM_ITEMS,
      formData: {
        name: '',
        state: '',
        orderby: '',
        orderbyType: '',
        updatedDate: [],
        // idList: [],
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false,
        selection: []
      },
      sortInfo: {},
      pageSizes: [10, 100, 1000]
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button size="mini" type="text" disabled={!this.showBtn('编辑')} onClick={() => this.handleEdit(row)}>编辑</el-button>
          <el-button size="mini" type="text" onClick={() => this.toViewCharts(row)}>走势图</el-button>
          <el-button size="mini" type="text" disabled={!this.showBtn('关联分类')} onClick={() => this.linkCategory(row)}>关联品类</el-button>
        </div>
      );
    },
    // 表格排序
    handleSortTable (data) {
      const { prop, order } = data
      this.sortInfo = {
        orderby: prop,
        orderbyType: order
      }
      this.getTableData()
    },
    // 获取表单查询入参
    getSearchFormParams () {
      const [startTime = '', endTime = ''] = this.formData.updatedDate || [];
      const formData = {
        updatedTimeStart: startTime,
        updatedTimeEnd: endTime,
        ..._.omit(this.formData, 'updatedDate'),
      }
      return {
        ...this.paginationParams,
        ...formData,
        ...this.sortInfo
      }
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId();
      const data = this.getSearchFormParams();
      const { retData } = await queryMaterialListService(
        data,
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.total = retData.totalNum;
      }
    },
    // 导出信息数据
    async exportCategory () {
      const res = await exportMaterialLinkCategoryService(
        {},
        state => { this.exportLoading = state; }
      );
      createExcelByExport({ res, excelTitle: '关联品类' });
    },
    // 新增
    handleAdd () {
      this.$router.push({ name: 'rawMaterialEdit' })
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({ name: 'rawMaterialEdit', params: { idList: [row.id] } })
    },
    // 批量编辑
    batchEdit () {
      const idList = this.tableInfo.selection.map(item => (item.id))
      this.$router.push({ name: 'rawMaterialEdit', params: { idList } })
    },
    // 查看走势图
    toViewCharts (row) {
      this.$router.push({ name: 'rawMaterialChart', query: { id: row.id } })
    },
    // 关联品类
    linkCategory (row) {
      this.materialId = row.id;
      this.materialName = row.name;
      this.categoryDialogVisible = true;
    },
    // 勾选需要处理的库存
    selectionChange (rows) {
      this.tableInfo.selection = rows;
    },
  }
}
</script>
